﻿@{
    ViewBag.Title = "MarkerSprite";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    #map {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div id="map"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    window.onload = function () {

        // Creating a reference to the mapDiv
        var mapDiv = document.getElementById('map');

        // Creating a latLng for the center of the map
        var latlng = new google.maps.LatLng(35.705262, 139.690475);

        // Creating an object literal containing the properties 
        // we want to pass to the map  
        var options = {
            center: latlng,
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map
        var map = new google.maps.Map(mapDiv, options);

        // Defining different MarkerImages for different states
        var wifi = new google.maps.MarkerImage(
          '/Images/markers.png',
          new google.maps.Size(32, 37),
          new google.maps.Point(0, 0),
          new google.maps.Point(16, 35)
        );

        var wifiHover = new google.maps.MarkerImage(
          '/Images/markers.png',
          new google.maps.Size(32, 37),
          new google.maps.Point(33, 0),
          new google.maps.Point(16, 35)
        );

        var wifiClick = new google.maps.MarkerImage(
          '/Images/markers.png',
          new google.maps.Size(32, 37),
          new google.maps.Point(66, 0),
          new google.maps.Point(16, 35)
        );

        // Adding a marker to the map
        //var image = 'E://pirate.png';
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(35.705262, 139.690475),
            map: map,
            title: 'Tokyo',
            icon: wifi
        });

        // Hover
        google.maps.event.addListener(marker, 'mouseover', function () {
            this.setIcon(wifiHover);
        });

        google.maps.event.addListener(marker, 'mouseout', function () {
            this.setIcon(wifi);
        });

        // Click
        google.maps.event.addListener(marker, 'mousedown', function () {
            this.setIcon(wifiClick);
        });

        google.maps.event.addListener(marker, 'mouseup', function () {
            this.setIcon(wifiHover);
        });
    }
</script>
